<template>
  <div class="about">
    <h1 v-if="userInfo != null && userInfo.value != null">{{ userInfo.value.username }}</h1>
    <v-btn v-hasPermi="['show-page-admin']" @click="toAdminPage">后台管理</v-btn>
    <v-btn @click="logoutHandler">退出登录</v-btn>
  </div>
</template>
<script>
import { getUserInfo, logout } from '@/api/auth';

import { reactive } from 'vue';
export default {
  // props:{},
  setup() {
    const userInfo = reactive({})
    const loadUserinfo = () => {
      getUserInfo().then((resp) => {
        userInfo.value = resp.data
      })
    }
    function logoutHandler() {
      logout().then(resp => {
        if (resp.code == 1) {
          localStorage.removeItem('cloud-dictionary-token')
          document.location.href = '/login.html'
        }
      })
    }
    function toAdminPage(){
      window.open(document.location.origin+'/admin.html')
    }
    loadUserinfo()
    return { userInfo, loadUserinfo, logoutHandler,toAdminPage }
  }
};
</script>
